<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>大屏自适应布局</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <link rel="stylesheet" href="./index.css" />
        <link rel="stylesheet" href="./util.css" />
    </head>

    <body>
        <div class="title">大屏自适应布局</div>
        <div class="header">
            <div id="left">
                <div id="leftOne"></div>
                <div id="leftTwo"></div>
                <div id="leftThree"></div>
            </div>
            <div id="main">
                <div id="mainOne"></div>
                <div id="mainTwo"></div>
            </div>
            <div id="right">
                <div id="rightOne"></div>
                <div id="rightTwo"></div>
                <div id="rightThree"></div>
            </div>
        </div>
    </body>

</html>
<script>
    const fitChartSize = (size, defalteWidth = 1920) => {
        let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        console.log(clientWidth, 'clientWidth')
        if (!clientWidth) return size;
        let scale = (clientWidth / defalteWidth);
        return Number((size * scale).toFixed(3));
    }

    function init() {
        var myChartLeftOne = echarts.init(document.getElementById("leftOne"));
        var optionLeftOne = {
            grid: { // 让图表占满容器
                top: fitChartSize(10),
                left: fitChartSize(10),
                right: fitChartSize(10),
                bottom: fitChartSize(10)
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            // legend: {
            //     show: false,
            //     emphasis: {
            //         color: 'red'
            //     },
            // },

            series: [{
                name: "Area Mode",
                type: "pie",
                radius: [fitChartSize(20), fitChartSize(80)],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                roseType: "area",
                itemStyle: {
                    borderRadius: 5,
                },
                label: {
                    color: '#85FF67',
                    fontSize: fitChartSize(18)
                },
                data: [{
                    value: 30,
                    name: "rose 1"
                }, {
                    value: 28,
                    name: "rose 2"
                }, {
                    value: 26,
                    name: "rose 3"
                }, {
                    value: 24,
                    name: "rose 4"
                }, {
                    value: 22,
                    name: "rose 5"
                }, {
                    value: 20,
                    name: "rose 6"
                }, {
                    value: 18,
                    name: "rose 7"
                }, {
                    value: 16,
                    name: "rose 8"
                }, ],
            }, ],

        };
        myChartLeftOne.setOption(optionLeftOne);
        var myChartLeftTwo = echarts.init(document.getElementById("leftTwo"));
        var optionLeftTwo = {
            grid: { // 让图表占满容器
                top: fitChartSize(60),
                left: fitChartSize(75),
                right: fitChartSize(60),
                bottom: fitChartSize(50)
            },
            legend: {
                data: ['收入总量', '支出总量'],
                itemGap: fitChartSize(10),
                itemWidth: fitChartSize(30),
                itemHeight: fitChartSize(15),
                textStyle: {
                    color: 'white',
                    fontSize: fitChartSize(18)
                }
            },
            xAxis: {
                type: 'category',
                // boundaryGap: false,
                axisLabel: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                },
            },
            series: [{
                name: '收入总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: 'transparent'
                            }, {
                                offset: 0.5,
                                color: '#00DCF6'
                            }, {
                                offset: 1,
                                color: '#85FF67'
                            }

                        ]
                    )
                }
            }, {
                name: '支出总量',

                data: [620, 732, 701, 734, 1090, 1130, 1120],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)',

                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#00DCF6'
                            }, {
                                offset: 1,
                                color: '#85FF67'
                            }

                        ]
                    )
                },
                barWidth: 10,
            }]
        };
        myChartLeftTwo.setOption(optionLeftTwo);
        var myChartLeftThree = echarts.init(document.getElementById("leftThree"));
        var optionLeftThree = {
            grid: { // 让图表占满容器
                top: fitChartSize(60),
                left: fitChartSize(60),
                right: fitChartSize(60),
                bottom: fitChartSize(50)
            },
            tooltip: {},
            legend: {
                show: false
            },
            xAxis: {
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisLabel: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                },
            },
            yAxis: {
                axisLabel: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                },
            },
            series: [{
                name: "Sale",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20, 4],
                barWidth: fitChartSize(10),
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#00DCF6'
                            }, {
                                offset: 1,
                                color: '#85FF67'
                            }

                        ]
                    ),
                    borderWidth: fitChartSize(12),
                    borderColor: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#00DCF6'
                            }, {
                                offset: 1,
                                color: '#85FF67'
                            }

                        ]
                    ),
                },
                backgroundStyle: {
                    borderWidth: fitChartSize(10),
                    // color: 'rgb(220, 220, 220, 0.8)',
                    borderColor: "rgb(220, 220, 220, 0.8)"
                }
            }]
        }
        myChartLeftThree.setOption(optionLeftThree);
        var myChartRightOne = echarts.init(document.getElementById("rightOne"));
        var optionRightOne = {
            grid: { // 让图表占满容器
                top: fitChartSize(80),
                left: fitChartSize(90),
                right: fitChartSize(100),
                bottom: fitChartSize(50)
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999',
                    }
                }
            },
            legend: {
                data: ['Eva', 'Pre', 'Temp'],
                top: fitChartSize(20),
                itemGap: fitChartSize(10),
                itemWidth: fitChartSize(30),
                itemHeight: fitChartSize(15),
                textStyle: {
                    color: 'white',
                    fontSize: fitChartSize(18)
                }
            },
            xAxis: [{
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    fontSize: fitChartSize(14),
                    color: 'white'
                },
            }],
            yAxis: [{
                type: 'value',
                name: 'Pre',
                nameTextStyle: {
                    fontSize: fitChartSize(14),
                    color: 'white'
                },
                min: 0,
                max: 150,
                interval: 30,
                // 定义轴上的刻度文字样式
                axisLabel: {
                    formatter: '{value} ml',
                    fontSize: fitChartSize(16),
                    color: 'white'
                }
            }, {
                type: 'value',
                name: 'Temp',
                nameTextStyle: {
                    fontSize: fitChartSize(14),
                    color: 'white'
                },
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C',
                    color: 'white'
                }
            }],
            series: [{
                name: 'Eva',
                type: 'bar',
                // stack: 'total',
                barGap: '-85%',
                tooltip: {
                    valueFormatter: function(value) {
                        return value + ' ml';
                    }
                },
                itemStyle: {
                    barBorderRadius: [7, 7, 0, 0],
                    borderColor: 'rgb(220, 220, 220, 0.8)',
                    borderWidth: 0,
                    color: 'rgb(220, 220, 220,0.8)'
                },
                barWidth: 14,
                data: [
                    150.0, 150.9, 150.0, 150.2, 150.6, 150.7, 150.6
                ]
            }, {
                name: 'Pre',
                type: 'bar',
                // stack: 'total',
                tooltip: {
                    valueFormatter: function(value) {
                        return value + ' ml';
                    }
                },
                itemStyle: {
                    barBorderRadius: [5, 5, 0, 0],
                    borderColor: 'transparent',
                    borderWidth: 0,
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#00DCF6'
                            }, {
                                offset: 1,
                                color: '#85FF67'
                            }

                        ]
                    )
                },
                barWidth: 10,
                data: [
                    46.0, 28.9, 30.0, 53.2, 65.6, 97.7, 115.6
                ]
            }, {
                name: 'Temp',
                type: 'line',
                yAxisIndex: 1, //设置执行那个y坐标  0:左边坐标，1:右边坐标
                tooltip: {
                    valueFormatter: function(value) {
                        return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
            }]
        };
        myChartRightOne.setOption(optionRightOne);
        var myChartRightTwo = echarts.init(document.getElementById("rightTwo"));
        var optionRightTwo = {
            grid: { // 让图表占满容器
                top: fitChartSize(100),
                left: fitChartSize(60),
                right: fitChartSize(60),
                bottom: fitChartSize(50)
            },
            // title: {
            //     text: 'Basic Radar Chart'
            // },
            legend: {
                data: ['Allocated Budget', 'Actual Spending'],
                itemGap: fitChartSize(10),
                itemWidth: fitChartSize(30),
                itemHeight: fitChartSize(15),
                textStyle: {
                    color: 'white',
                    fontSize: fitChartSize(18)
                }
            },
            radar: {
                center: ['50%', '55%'],
                radius: '60%',
                // shape: 'circle',
                name: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                },
                indicator: [{
                    name: 'Sales',
                    max: 6500
                }, {
                    name: 'Admin',
                    max: 16000
                }, {
                    name: 'Infor',
                    max: 30000
                }, {
                    name: 'Cust',
                    max: 38000
                }, {
                    name: 'Dev',
                    max: 52000
                }, {
                    name: 'Market',
                    max: 25000
                }],

            },
            series: [{
                name: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                },
                type: 'radar',
                data: [{
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget',
                    areaStyle: {
                        color: new echarts.graphic.RadialGradient(
                            0.5, 0.5, 0.5, [{
                                    offset: 0,
                                    color: 'transparent'
                                }, {
                                    offset: 1,
                                    color: '#85FF67'
                                },

                            ]
                        )
                    }
                }, {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending',
                    areaStyle: {
                        color: new echarts.graphic.RadialGradient(
                            0.5, 0.5, 0.5, [{
                                    offset: 0,
                                    color: 'transparent'
                                }, {
                                    offset: 1,
                                    color: '#00DCF6'
                                }

                            ]
                        )
                    }
                }],

            }]
        };
        myChartRightTwo.setOption(optionRightTwo);
        var myChartRightThree = echarts.init(document.getElementById("rightThree"));
        var optionRightThree = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                type: 'scroll',
                top: fitChartSize(50),
                right: fitChartSize(50),
                // bottom: fitChartSize(50),
                orient: 'vertical',
                align: 'right',
                itemGap: fitChartSize(10),
                itemWidth: fitChartSize(30),
                itemHeight: fitChartSize(15),
                textStyle: {
                    color: 'white',
                    fontSize: fitChartSize(18)
                }

            },
            series: [{
                name: 'Access From',
                type: 'pie',
                center: ['30%', '50%'],
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: [{
                    value: 1048,
                    name: 'Search Engine'
                }, {
                    value: 735,
                    name: 'Direct'
                }, {
                    value: 580,
                    name: 'Email'
                }, {
                    value: 484,
                    name: 'Union Ads'
                }, {
                    value: 300,
                    name: 'Video Ads'
                }]
            }]
        };
        myChartRightThree.setOption(optionRightThree);
        var myChartMainOne = echarts.init(document.getElementById("mainOne"));
        var optionMainOne = {
            grid: { // 让图表占满容器
                top: fitChartSize(80),
                left: fitChartSize(70),
                right: fitChartSize(70),
                bottom: fitChartSize(50)
            },
            series: [{
                type: 'map',
                map: 'china', // 设置地图类型
                itemStyle: { // 地图区块的样式
                    normal: {
                        areaColor: '#00BFFF', // 地图底色，这里设置为浅灰色
                        borderColor: '#000', // 边界线颜色
                        borderWidth: 1 // 边界线宽度
                    },
                    // 高亮状态下的样式
                    emphasis: {
                        areaColor: '#00FFFF' // 鼠标悬停时的颜色
                    }
                },
                label: {
                    // show: true // 显示省会名称
                },
                data: [
                    // 此处可以添加数据，例如：
                    // {name: '广东', value: 100},
                    // {name: '北京', value: 200}
                ]
            }]
        };
        myChartMainOne.setOption(optionMainOne);
        var myChartMainTwo = echarts.init(document.getElementById("mainTwo"));
        var optionMainTwo = {
            grid: { // 让图表占满容器
                top: fitChartSize(70),
                left: fitChartSize(70),
                right: fitChartSize(70),
                bottom: fitChartSize(50)
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['case1', 'case2', 'case3', 'case4'],
                top: fitChartSize(30),
                itemGap: fitChartSize(10),
                itemWidth: fitChartSize(30),
                itemHeight: fitChartSize(15),
                textStyle: {
                    color: 'white',
                    fontSize: fitChartSize(18)
                }
            },
            xAxis: {
                type: 'category',
                data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                interval: 0,
                axisLabel: {
                    fontSize: fitChartSize(16),
                    color: 'white'
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'case1',
                data: [90, 190, 150, 120, 160, 80, 50, 80, 170, 90, 80, 80],
                type: 'bar',
                // barWidth: 5
            }, {
                name: 'case2',
                data: [60, 100, 150, 80, 70, 110, 130, 150, 80, 70, 110, 90],
                type: 'bar'
            }, {
                name: 'case3',
                data: [120, 120, 130, 100, 110, 60, 90, 110, 90, 120, 160, 120],
                type: 'bar'
            }, {
                name: 'case4',
                data: [100, 160, 80, 40, 70, 110, 180, 130, 110, 70, 130, 130],
                type: 'bar'
            }]
        };
        myChartMainTwo.setOption(optionMainTwo);
        window.addEventListener('resize', function() {
            myChartLeftOne.resize();
            myChartLeftTwo.resize();
            myChartLeftThree.resize();
            myChartRightOne.resize();
            myChartRightTwo.resize();
            myChartRightThree.resize();
            myChartMainOne.resize();
            myChartMainTwo.resize();
        })
    }
    init()
    window.addEventListener('resize', function() {
        init()
            // window.screenWidth = document.body.clientWidth
            // myChartLeftOne.resize();
            // optionLeftOne.series[0].label.fontSize = fitChartSize(18)
            // myChartLeftOne.setOption(optionLeftOne);
            // myChartLeftTwo.resize();
            // optionLeftTwo.legend.textStyle.fontSize = fitChartSize(18)
            // myChartLeftTwo.setOption(optionLeftTwo);
            // myChartLeftThree.resize();
            // // optionLeftThree
            // // myChartMain.resize();
            // myChartRightOne.resize();
            // optionRightOne.legend.textStyle.fontSize = fitChartSize(18)
            // myChartRightOne.setOption(optionRightOne);
            // myChartRightTwo.resize();
            // optionRightTwo.legend.textStyle.fontSize = fitChartSize(18)
            // myChartRightTwo.setOption(optionRightTwo);
            // myChartRightThree.resize();
            // optionRightThree.legend.textStyle.fontSize = fitChartSize(18)
            // optionRightThree.legend.itemGap = fitChartSize(10)
            // optionRightThree.legend.itemWidth = fitChartSize(25)
            // optionRightThree.legend.itemHeight = fitChartSize(10)
            // myChartRightThree.setOption(optionRightThree);
            // myChartMainOne.resize()
            // myChartMainOne.setOption(optionMainOne);
            // myChartMainTwo.resize()
            // optionMainTwo.legend.textStyle.fontSize = fitChartSize(18)
            // optionMainTwo.legend.top = fitChartSize(10)
            // myChartMainTwo.setOption(optionMainTwo);
    })
</script>
<style></style>